<!DOCTYPE html><html><head><title>Ext.CompositeElement | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
<style type="text/css">.head-band { display: none; }
.header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
.doc-tab .members .member a.more { background-color: #efefef; }
</style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
</head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit 
<a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">

    req = {
        liveURL: '.',
        standAloneMode: true,
        origDocClass: 'Ext.CompositeElement',
        docClass: 'Ext.CompositeElement',
        docReq: 'Ext.CompositeElement',
        version: '4.0',
        baseURL: '.',
        baseDocURL: '.',
        baseProdURL: '.'
    };

    clsInfo = {};



</script>

<script type="text/javascript" src="../search.js"></script>
<!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
<script type="text/javascript" src="../class_tree.js"></script>
<script type="text/javascript" src="../class_doc.js"></script>
<script type="text/javascript">
    req.source = 'CompositeElement2.html#Ext-CompositeElement';
    clsInfo = {"methods":["add","clear","contains","each","fill","filter","first","getCount","indexOf","item","last","removeElement","replaceElement"],"cfgs":[],"properties":["","elements"],"events":[],"subclasses":[]};
    Ext.onReady(function() {
        Ext.create('Docs.classPanel');
    });
</script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/CompositeElement2.html#Ext-CompositeElement" target="_blank">Ext.CompositeElement</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><pre class="subclasses"><h4>Hierarchy</h4><div class="subclass f"><a href="Ext.CompositeElementLite.html" rel="Ext.CompositeElementLite" class="cls docClass">Ext.CompositeElementLite</a><div class="subclass"><strong>Ext.CompositeElement</strong></div></div></pre><p>This class encapsulates a <i>collection</i> of DOM elements, providing methods to filter
members, or to perform collective actions upon the whole set.</p>


<p>Although they are not listed, this class supports all of the methods of <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> and
<a href="Ext.fx.Anim.html" rel="Ext.fx.Anim" class="docClass">Ext.fx.Anim</a>. The methods from these classes will be performed on all the elements in this collection.</p>


<p>All methods return <i>this</i> and can be chained.</p>


<p>Usage:</p>

<pre class="prettyprint"><code>var els = Ext.select("#some-el div.some-class", true);
// or select directly from an existing element
var el = Ext.get('some-el');
el.select('div.some-class', true);

els.setWidth(100); // all elements become 100 width
els.hide(true); // all elements fade out and hide
// or
els.setWidth(100).hide(true);
</code></pre>

<div class="members"><div class="m-properties"><a name="properties"></a><div class="definedBy">Defined By</div><h3 class="prp p">Properties</h3><div id="property-" class="member f ni"><a href="Ext.CompositeElement.html#property-" rel="property-" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElement.html" class="definedIn docClass">Ext.CompositeElement</a><br/><a href="../source/CompositeElement2.html#Ext-CompositeElement-property-" class="viewSource">view source</a></div><a></a><a name="property-"></a><a href="Ext.CompositeElement.html#" rel="property-" class="cls expand"></a><span> : Object</span></div><div class="description"><div class="short"><p>Iterates each <code>element</code> in this <code>composite</code> calling the supplied function using <a href="Ext.html#each" rel="Ext#each" class="docClass">Ext.each</a>.</p>
</div><div class="long"><p>Iterates each <code>element</code> in this <code>composite</code> calling the supplied function using <a href="Ext.html#each" rel="Ext#each" class="docClass">Ext.each</a>.</p>
</div></div></div><div id="property-elements" class="member inherited"><a href="Ext.CompositeElement.html#property-elements" rel="property-elements" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-property-elements" class="viewSource">view source</a></div><a name="elements"></a><a name="property-elements"></a><a href="Ext.CompositeElement.html#" rel="property-elements" class="cls expand">elements</a><span> : Array</span></div><div class="description"><div class="short">The Array of DOM elements which this CompositeElement encapsulates. Read-only.


This will not usually be accessed in...</div><div class="long"><p>The Array of DOM elements which this CompositeElement encapsulates. Read-only.</p>


<p>This will not <i>usually</i> be accessed in developers' code, but developers wishing
to augment the capabilities of the CompositeElementLite class may use it when adding
methods to the class.</p>


<p>For example to add the <code>nextAll</code> method to the class to <b>add</b> all
following siblings of selected elements, the code would be</p>


<p><code></p>

<pre>Ext.override(Ext.CompositeElementLite, {
    nextAll: function() {
        var els = this.elements, i, l = els.length, n, r = [], ri = -1;

//      Loop through all elements in this Composite, accumulating
//      an Array of all siblings.
        for (i = 0; i < l; i++) {
            for (n = els[i].nextSibling; n; n = n.nextSibling) {
                r[++ri] = n;
            }
        }

//      Add all found siblings to this Composite
        return this.add(r);
    }
});</pre>


<p></code></p>
</div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-add" class="member f inherited"><a href="Ext.CompositeElement.html#method-add" rel="method-add" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-add" class="viewSource">view source</a></div><a name="add"></a><a name="method-add"></a><a href="Ext.CompositeElement.html#" rel="method-add" class="cls expand">add</a>(
<span class="pre">Mixed els, Object root</span>)
 : CompositeElement</div><div class="description"><div class="short"><p>Adds elements to this Composite object.</p>
</div><div class="long"><p>Adds elements to this Composite object.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">els</span> : Mixed<div class="sub-desc"><p>Either an Array of DOM elements to add, or another Composite object who's elements should be added.</p>
</div></li><li><span class="pre">root</span> : Object<div class="sub-desc">
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>This Composite object.</p>
</li></ul></div></div></div><div id="method-clear" class="member inherited"><a href="Ext.CompositeElement.html#method-clear" rel="method-clear" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-clear" class="viewSource">view source</a></div><a name="clear"></a><a name="method-clear"></a><a href="Ext.CompositeElement.html#" rel="method-clear" class="cls expand">clear</a> : void</div><div class="description"><div class="short"><p>Removes all elements.</p>
</div><div class="long"><p>Removes all elements.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-contains" class="member inherited"><a href="Ext.CompositeElement.html#method-contains" rel="method-contains" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite-more.html#Ext-CompositeElementLite-method-contains" class="viewSource">view source</a></div><a name="contains"></a><a name="method-contains"></a><a href="Ext.CompositeElement.html#" rel="method-contains" class="cls expand">contains</a>(
<span class="pre">Object el</span>)
 : void</div><div class="description"><div class="short"><p>Returns true if this composite contains the passed element</p>
</div><div class="long"><p>Returns true if this composite contains the passed element</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Object<div class="sub-desc"><p>{Mixed} The id of an element, or an <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a>, or an HtmlElement to find within the composite collection.</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;<p>Boolean</p>
</li></ul></div></div></div><div id="method-each" class="member inherited"><a href="Ext.CompositeElement.html#method-each" rel="method-each" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-each" class="viewSource">view source</a></div><a name="each"></a><a name="method-each"></a><a href="Ext.CompositeElement.html#" rel="method-each" class="cls expand">each</a>(
<span class="pre">Function fn, [Object scope]</span>)
 : CompositeElement</div><div class="description"><div class="short"><p>Calls the passed function for each element in this composite.</p>

</div><div class="long"><p>Calls the passed function for each element in this composite.</p>

<h3 class="pa">Parameters</h3><ul><li><span class="pre">fn</span> : Function<div class="sub-desc"><p>The function to call. The function is passed the following parameters:<ul>
<li><b>el</b> : Element<div class="sub-desc">The current Element in the iteration.
<b>This is the flyweight (shared) <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> instance, so if you require a
a reference to the dom node, use el.dom.</b></div></li>
<li><b>c</b> : Composite<div class="sub-desc">This Composite object.</div></li>
<li><b>idx</b> : Number<div class="sub-desc">The zero-based index in the iteration.</div></li>
</ul></p>
</div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>(optional) The scope (<i>this</i> reference) in which the function is executed. (defaults to the Element)</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>this</p>
</li></ul></div></div></div><div id="method-fill" class="member inherited"><a href="Ext.CompositeElement.html#method-fill" rel="method-fill" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-fill" class="viewSource">view source</a></div><a name="fill"></a><a name="method-fill"></a><a href="Ext.CompositeElement.html#" rel="method-fill" class="cls expand">fill</a>(
<span class="pre">Mixed els</span>)
 : CompositeElement</div><div class="description"><div class="short"><p>Clears this Composite and adds the elements passed.</p>
</div><div class="long"><p>Clears this Composite and adds the elements passed.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">els</span> : Mixed<div class="sub-desc"><p>Either an array of DOM elements, or another Composite from which to fill this Composite.</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>this</p>
</li></ul></div></div></div><div id="method-filter" class="member inherited"><a href="Ext.CompositeElement.html#method-filter" rel="method-filter" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-filter" class="viewSource">view source</a></div><a name="filter"></a><a name="method-filter"></a><a href="Ext.CompositeElement.html#" rel="method-filter" class="cls expand">filter</a>(
<span class="pre">String/Function selector</span>)
 : CompositeElement</div><div class="description"><div class="short"><p>Filters this composite to only elements that match the passed selector.</p>
</div><div class="long"><p>Filters this composite to only elements that match the passed selector.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">selector</span> : String/Function<div class="sub-desc"><p>A string CSS selector or a comparison function.
The comparison function will be called with the following arguments:<ul>
<li><code>el</code> : Ext.core.Element<div class="sub-desc">The current DOM element.</div></li>
<li><code>index</code> : Number<div class="sub-desc">The current index within the collection.</div></li>
</ul></p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>this</p>
</li></ul></div></div></div><div id="method-first" class="member inherited"><a href="Ext.CompositeElement.html#method-first" rel="method-first" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite-more.html#Ext-CompositeElementLite-method-first" class="viewSource">view source</a></div><a name="first"></a><a name="method-first"></a><a href="Ext.CompositeElement.html#" rel="method-first" class="cls expand">first</a> : Ext.core.Element</div><div class="description"><div class="short"><p>Returns the first Element</p>
</div><div class="long"><p>Returns the first Element</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-getCount" class="member inherited"><a href="Ext.CompositeElement.html#method-getCount" rel="method-getCount" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-getCount" class="viewSource">view source</a></div><a name="getCount"></a><a name="method-getCount"></a><a href="Ext.CompositeElement.html#" rel="method-getCount" class="cls expand">getCount</a> : void</div><div class="description"><div class="short"><p>Returns the number of elements in this Composite.</p>
</div><div class="long"><p>Returns the number of elements in this Composite.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;<p>Number</p>
</li></ul></div></div></div><div id="method-indexOf" class="member inherited"><a href="Ext.CompositeElement.html#method-indexOf" rel="method-indexOf" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-indexOf" class="viewSource">view source</a></div><a name="indexOf"></a><a name="method-indexOf"></a><a href="Ext.CompositeElement.html#" rel="method-indexOf" class="cls expand">indexOf</a>(
<span class="pre">Object el</span>)
 : void</div><div class="description"><div class="short"><p>Find the index of the passed element within the composite collection.</p>
</div><div class="long"><p>Find the index of the passed element within the composite collection.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Object<div class="sub-desc"><p>{Mixed} The id of an element, or an <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a>, or an HtmlElement to find within the composite collection.</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;<p>Number The index of the passed <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> in the composite collection, or -1 if not found.</p>
</li></ul></div></div></div><div id="method-item" class="member inherited"><a href="Ext.CompositeElement.html#method-item" rel="method-item" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-item" class="viewSource">view source</a></div><a name="item"></a><a name="method-item"></a><a href="Ext.CompositeElement.html#" rel="method-item" class="cls expand">item</a>(
<span class="pre">Number index</span>)
 : Ext.core.Element</div><div class="description"><div class="short"><p>Returns a flyweight Element of the dom element object at the specified index</p>
</div><div class="long"><p>Returns a flyweight Element of the dom element object at the specified index</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">index</span> : Number<div class="sub-desc">
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-last" class="member inherited"><a href="Ext.CompositeElement.html#method-last" rel="method-last" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite-more.html#Ext-CompositeElementLite-method-last" class="viewSource">view source</a></div><a name="last"></a><a name="method-last"></a><a href="Ext.CompositeElement.html#" rel="method-last" class="cls expand">last</a> : Ext.core.Element</div><div class="description"><div class="short"><p>Returns the last Element</p>
</div><div class="long"><p>Returns the last Element</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-removeElement" class="member inherited"><a href="Ext.CompositeElement.html#method-removeElement" rel="method-removeElement" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite-more.html#Ext-CompositeElementLite-method-removeElement" class="viewSource">view source</a></div><a name="removeElement"></a><a name="method-removeElement"></a><a href="Ext.CompositeElement.html#" rel="method-removeElement" class="cls expand">removeElement</a>(
<span class="pre">Mixed el, [Boolean removeDom]</span>)
 : CompositeElement</div><div class="description"><div class="short"><p>Removes the specified element(s).</p>
</div><div class="long"><p>Removes the specified element(s).</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The id of an element, the Element itself, the index of the element in this composite
or an array of any of those.</p>
</div></li><li><span class="pre">removeDom</span> : Boolean<div class="sub-desc"><p>(optional) True to also remove the element from the document</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>this</p>
</li></ul></div></div></div><div id="method-replaceElement" class="member inherited"><a href="Ext.CompositeElement.html#method-replaceElement" rel="method-replaceElement" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-replaceElement" class="viewSource">view source</a></div><a name="replaceElement"></a><a name="method-replaceElement"></a><a href="Ext.CompositeElement.html#" rel="method-replaceElement" class="cls expand">replaceElement</a>(
<span class="pre">Mixed el, Mixed replacement, Boolean domReplace</span>)
 : CompositeElement</div><div class="description"><div class="short"><p>Replaces the specified element with the passed element.</p>
</div><div class="long"><p>Replaces the specified element with the passed element.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The id of an element, the Element itself, the index of the element in this composite
to replace.</p>
</div></li><li><span class="pre">replacement</span> : Mixed<div class="sub-desc"><p>The id of an element or the Element itself.</p>
</div></li><li><span class="pre">domReplace</span> : Boolean<div class="sub-desc"><p>(Optional) True to remove and replace the element in the document too.</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>this</p>
</li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>